<!-- 个人信息 -->
<template>
  <div class="user">
    <div class="banner">
      <img src="@/assets/bj.jpg" alt="" />
    </div>
    <div class="info">
      <van-image
        v-if="currentUser"
        width="70"
        height="70"
        round
        cover
        src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic2.zhimg.com%2F50%2Fv2-04edf6da1449917c59889bf69d8c8c2d_hd.jpg&refer=http%3A%2F%2Fpic2.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637198432&t=85338ca637e275871c1e0938e6c5bca1"
      />
      <van-image
        v-else
        width="70"
        height="70"
        round
        cover
        :src="require('@/assets/pic.png')"
        @click="$router.push('/login')"
      />
      <h2>{{ currentUser ? currentUser.username : "请先登录~" }}</h2>
    </div>
    <van-divider />
    <van-cell-group inset>
      <van-cell title="历史订单">
        <van-icon name="arrow" />
      </van-cell>
      <van-cell title="更新信息" @click="$router.push({ path: '/updateInfo' })">
        <van-icon name="arrow" />
      </van-cell>
      <van-cell title="账号安全">
        <van-icon name="arrow" />
      </van-cell>
      <van-cell title="关于">
        <van-icon name="arrow" />
      </van-cell>
    </van-cell-group>
    <div class="btn">
      <van-button v-if="currentUser" type="danger" plain block @click="exit"
        >退出登录</van-button
      >
      <van-button v-else type="primary" plain block to="Login"
        >立即登录</van-button
      >
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { getCurrentUserInfo } from "@/api/userInfo.js";
export default {
  name: "My",
  data() {
    return {
      currentUser: "",
    };
  },
  methods: {
    async getCurrentUser() {
      if (this.userInfo) {
        let { data } = await getCurrentUserInfo({
          username: this.userInfo.username,
        });
        this.currentUser = data.data;
        this.$store.commit("SET_USERINFO", this.currentUser);
      }
    },
    exit() {
      this.$dialog
        .confirm({
          title: "退出",
          message: "确认退出吗?",
        })
        .then(() => {
          this.currentUser = "";
          localStorage.removeItem("userInfo");
          this.$store.commit("DELETE_USERINFO");
        })
        .catch((err) => err);
    },
  },
  computed: {
    ...mapState(["userInfo"]),
  },
  created() {
    this.getCurrentUser();
  },
};
</script>


<style lang= "less" scoped>
.user {
  background-color: rgb(247, 248, 250);
  height: 100%;
  .banner {
    img {
      width: 100%;
      height: 150px;
    }
  }
  .info {
    height: 70px;
    line-height: 70px;
    display: flex;
    margin-top: -35px;
    padding-left: 25px;
    h2 {
      font-family: 楷体;
      font-size: 20px;
      padding-left: 15px;
    }
  }
  .van-cell-group {
    margin-top: 20px;
  }
  .btn {
    width: 90%;
    padding-left: 5%;
    margin-top: 25px;
  }
}
</style>